<template>
  <div class="app-container">
    <vxe-form
      ref="queryForm"
      :data="query.baseParams"
      :rules="queryFormRules"
      @submit="confirmBaseQueryData"
    >
      <vxe-form-item field="roleName" title="角色名" :item-render="{}">
        <template #default>
          <el-input v-model="query.baseParams.roleName" clearable />
        </template>
      </vxe-form-item>
      <vxe-form-item field="enable" title="是否可用" :item-render="{}">
        <template #default>
          <el-select v-model="query.baseParams.enable" clearable @change="confirmBaseQueryData">
            <el-option value="ENABLE" label="是" />
            <el-option value="DISABLE" label="否" />
          </el-select>
        </template>
      </vxe-form-item>
      <vxe-form-item>
        <template #default>
          <vxe-button status="primary" type="submit">查询</vxe-button>
          <vxe-button type="button" @click="restBaseForm">重置</vxe-button>
        </template>
      </vxe-form-item>
    </vxe-form>

    <vxe-toolbar custom>
      <template #buttons>
        <vxe-button status="success" @click="showModal('create',{})">新增</vxe-button>
      </template>
      <template #tools>
        <vxe-button type="button" icon="vxe-icon-download" circle title="导出列表数据" @click="exportTableData('vxeTable')" />
      </template>
    </vxe-toolbar>

    <vxe-table
      ref="vxeTable"
      :loading="tableLoading"
      :column-config="{resizable: true}"
      :data="tableData"
      @sort-change="tableSortChange"
    >
      <vxe-column type="seq" align="right" width="40" />
      <vxe-column field="roleName" title="角色名" sortable />
      <vxe-column field="enable" title="是否可用">
        <template #default="{row}">
          <el-tag v-if="row.enable === 'ENABLE'" type="primary">是</el-tag>
          <el-tag v-if="row.enable === 'DISABLE'" type="danger">否</el-tag>
        </template>
      </vxe-column>
      <vxe-column field="remark" title="备注" />
      <vxe-column field="createTime" title="创建时间" />
      <vxe-column field="updateTime" title="修改时间" />
      <vxe-column field="createByName" title="创建人" />
      <vxe-column field="updateByName" title="修改人" />
      <vxe-column field="op" title="操作">
        <template slot-scope="scope">
          <vxe-button type="text" status="primary" @click="showModal('update',scope.row)">编辑</vxe-button>
          <vxe-button type="text" status="danger" :disabled="scope.row.enable === 1" @click="deleteTableRow(scope.row.id)">删除</vxe-button>
          <vxe-button type="text" status="primary" @click="showModal('router',{roleId: scope.row.id,roleName: scope.row.roleName})">权限</vxe-button>
        </template>
      </vxe-column>
    </vxe-table>
    <vxe-pager
      background
      :current-page.sync="query.page.currentPage"
      :page-size.sync="query.page.pageSize"
      :total="tableTotalRow"
      :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
      @page-change="changePage"
    />
    <create-dialog
      v-if="dialogs.create.visible"
      v-model="dialogs.create.visible"
      :form-data="dialogs.create.formData"
      @success="loadTable"
    />
    <update-dialog
      v-if="dialogs.update.visible"
      v-model="dialogs.update.visible"
      :form-data="dialogs.update.formData"
      @success="loadTable"
    />
    <role-router-dialog
      v-if="dialogs.router.visible"
      v-model="dialogs.router.visible"
      :title="dialogs.router.title"
      :form-data="dialogs.router.formData"
    />

  </div>
</template>

<script>
import Api from '@/api/upms/role'
import CreateDialog from './dialog/CreateDialog'
import UpdateDialog from './dialog/UpdateDialog'
import RoleRouterDialog from './dialog/RoleRouterDialog'
import { VxeTableMixin } from '@/mixins/vxe/VxeTableMixin'
export default {
  name: 'UpmsRole',
  components: { CreateDialog, UpdateDialog, RoleRouterDialog },
  mixins: [VxeTableMixin],
  data() {
    return {
      api: {
        query: Api.page,
        delete: Api.delete
      },
      query: {
        baseParams: {
          roleName: undefined,
          enable: undefined
        }
      },
      dialogs: {
        router: {
          visible: false,
          formData: {
            roleId: undefined
          }
        }
      }
    }
  },
  computed: {

  },
  mounted() {
    this.confirmBaseQueryData()
  },
  methods: {

  }
}
</script>

<style>

</style>
